<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org"
      xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout"
      layout:decorate="~{layout/base}">
<head>
    <title>用户管理</title>
</head>
<body>
<div layout:fragment="content">
    <div class="d-flex justify-content-between align-items-center mb-4">
        <h1 class="h3 mb-0">用户管理</h1>
        <a th:href="@{/users/new}" class="btn btn-primary">
            <i class="fas fa-plus me-1"></i> 新增用户
        </a>
    </div>

    <!-- 搜索和筛选 -->
    <div class="card mb-4">
        <div class="card-body">
            <form class="row g-3">
                <div class="col-md-4">
                    <label for="search" class="form-label">搜索用户</label>
                    <input type="text" class="form-control" id="search" placeholder="输入用户名或邮箱...">
                </div>
                <div class="col-md-3">
                    <label for="status" class="form-label">状态</label>
                    <select class="form-select" id="status">
                        <option selected value="">全部</option>
                        <option value="active">活跃</option>
                        <option value="inactive">禁用</option>
                    </select>
                </div>
                <div class="col-md-3">
                    <label for="role" class="form-label">角色</label>
                    <select class="form-select" id="role">
                        <option selected value="">全部</option>
                        <option value="USER">普通用户</option>
                        <option value="ADMIN">管理员</option>
                    </select>
                </div>
                <div class="col-md-2 d-flex align-items-end">
                    <button type="submit" class="btn btn-outline-primary w-100">
                        <i class="fas fa-search me-1"></i> 搜索
                    </button>
                </div>
            </form>
        </div>
    </div>

    <!-- 用户列表 -->
    <div class="card">
        <div class="card-body">
            <div class="table-responsive">
                <table class="table table-hover">
                    <thead>
                    <tr>
                        <th>ID</th>
                        <th>用户名</th>
                        <th>邮箱</th>
                        <th>角色</th>
                        <th>状态</th>
                        <th>注册时间</th>
                        <th>操作</th>
                    </tr>
                    </thead>
                    <tbody>
                    <tr th:each="user : ${users}">
                        <td th:text="${user.id}">1</td>
                        <td th:text="${user.username}">admin</td>
                        <td th:text="${user.email}">admin@example.com</td>
                        <td>
                            <span th:if="${user.role == 'ADMIN'}" class="badge bg-danger" th:text="${user.role}">ADMIN</span>
                            <span th:if="${user.role == 'USER'}" class="badge bg-secondary" th:text="${user.role}">USER</span>
                        </td>
                        <td>
                            <span class="badge bg-success">活跃</span>
                        </td>
                        <td th:text="${#dates.format(user.createdAt, 'yyyy-MM-dd HH:mm')}">2024-01-01 10:00</td>
                        <td>
                            <div class="btn-group btn-group-sm">
                                <a th:href="@{/users/{id}(id=${user.id})}" class="btn btn-outline-primary">
                                    <i class="fas fa-edit"></i>
                                </a>
                                <button class="btn btn-outline-danger" data-bs-toggle="modal"
                                        data-bs-target="#deleteModal" th:attr="data-userid=${user.id}">
                                    <i class="fas fa-trash"></i>
                                </button>
                            </div>
                        </td>
                    </tr>
                    </tbody>
                </table>
            </div>

            <!-- 分页 -->
            <nav aria-label="Page navigation">
                <ul class="pagination justify-content-center">
                    <li class="page-item disabled">
                        <a class="page-link" href="#" tabindex="-1">上一页</a>
                    </li>
                    <li class="page-item active"><a class="page-link" href="#">1</a></li>
                    <li class="page-item"><a class="page-link" href="#">2</a></li>
                    <li class="page-item"><a class="page-link" href="#">3</a></li>
                    <li class="page-item">
                        <a class="page-link" href="#">下一页</a>
                    </li>
                </ul>
            </nav>
        </div>
    </div>

    <!-- 删除确认模态框 -->
    <div class="modal fade" id="deleteModal" tabindex="-1" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title">确认删除</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">
                    确定要删除这个用户吗？此操作不可恢复。
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">取消</button>
                    <button type="button" class="btn btn-danger">确认删除</button>
                </div>
            </div>
        </div>
    </div>
</div>

<div layout:fragment="scripts">
    <script>
        // 用户管理特定的JS代码
        document.addEventListener('DOMContentLoaded', function() {
            // 删除按钮点击事件
            const deleteButtons = document.querySelectorAll('[data-bs-target="#deleteModal"]');
            deleteButtons.forEach(button => {
                button.addEventListener('click', function() {
                    const userId = this.getAttribute('data-userid');
                    console.log('准备删除用户:', userId);
                });
            });
        });
    </script>
</div>
</body>
</html>